<template>
	
	<div>
		
		<header class="navigation">
			<div><img src="../assets/rightbut.png"></div>
			<div>申请售后</div>
		<div></div>
		</header>
		
		<div class="title">本次售后服务由京选友慧为你提供</div>
		
		<div>
			<div class="goods">
				<div class="goodsimg"><img :src="goodslist.goodsDetailVo.goodsImg"></div>
				<div class="goodsName">
					<div>{{goodslist.goodsDetailVo.goodsName}}</div>
					<div></div>
				</div>
				<div class="price">
					<div>￥{{goodslist.goodsDetailVo.price}}</div>
					<div>￥{{goodslist.goodsDetailVo.orginPrice}}</div>
					<div>×{{goodslist.goodsDetailVo.count}}</div>
				</div>
			</div>
			<div class="total">共计{{goodslist.totalCount}}件商品 合计：￥{{goodslist.sumAmount}}(含运费￥{{goodslist.expressFee}})</div>
		</div>
		
		<div class="serve">服务类型</div>
		
		<div class="servertype">
			<button v-if='state ==3' v-for='item in nameList' :class="name == item ?'btnon' :'btn'" @click="nameon(item)">{{item}}</button>
			<button v-if='state ==4' v-for='item in nameLists' :class="name == item ?'btnon' :'btn'" @click="nameon(item)">{{item}}</button>
		</div>
		
		<div class="servecause">
			<div v-if='name == "仅退款"'>
				<!--<div class="servecause_d" @click="cargotypeon">
					<div>货物状态</div>
					<div>{{cargotypeName}}<img src="../assets/return.png"></div>
				</div>-->
				<div class="servecause_d" @click="refundtypeon">
					<div>退货原因</div>
					<div>{{refundName}}<img src="../assets/return.png"></div>
				</div>
				<div class="refundsum">
					<div>退款金额<span>￥{{goodslist.refundAmount}}</span></div>
					<div>最多退款 ￥{{goodslist.sumAmount}}</div>
				</div>
			</div>
			<div v-if='name == "退款退货"'>
				<div class="servecause_d" @click="refundtypeon">
					<div>退货原因</div>
					<div>{{refundName}}<img src="../assets/return.png"></div>
				</div>
				<div class="refundsum">
					<div>退款金额<span>￥{{goodslist.refundAmount}}</span></div>
					<div>最多退款 ￥{{goodslist.sumAmount}}</div>
				</div>
			</div>
			<div v-if='name == "换货"'>
				<div class="servecause_d" @click="applyforon">
					<div>申请原因</div>
					<div>{{applyforName}}<img src="../assets/return.png"></div>
				</div>
			</div>
			<div v-if='name == "维修"'>
				<div class="servecause_d" @click="applyforon">
					<div>申请原因</div>
					<div>{{applyforName}}<img src="../assets/return.png"></div>
				</div>
			</div>
		</div>
		
		<!--<div class="type" v-show="cargoshow">
			<div class="cargotype">
				<div>货物状态</div>
				<div v-for='item in cargotype' class="cargotype_dd" @click="cargotypename(item.name)">{{item.name}}</div>
				<div class="shut" @click="shuton">关闭</div>
			</div>
		</div>-->
		<!--仅退款  退款货-->
		<div class="type" v-show="refundshow">
			<div class="cargotype">
				<div>退款原因</div>
				<div class="cargotype_dd" v-for='item in refundtype' @click="refundname(item)">{{item}}</div>
				<div class="shut" @click="refundshuton">关闭</div>
			</div>
		</div>
		<!--换货  维修-->
		<div class="type" v-show='applyforshow'>
			<div class="cargotype">
				<div>申请原因</div>
				<div class="cargotype_dd" v-for='item in refundtype' @click="applyforname(item)">{{item}}</div>
				<div class="shut" @click="applyforshuton">关闭</div>
			</div>
		</div>
		
		<div class="explain_d">
			<textarea cols="45" rows="6" placeholder="退款说明(必填)" class="explain" maxlength="500" ref='content'></textarea>
		</div>
		<div class="addimg">
			<div class="addimg_d" v-for="item in img" v-if='img != ""'>
				<img :src="item" />
			</div>
			<div class="add" v-if='img.length != 3'>
				<input type="file" name="" id="" value="" class="file"  @change="changeUrl"/>
			</div>
		</div>
		<div class="submit" @click="submiton">提交</div>
		
		
	</div>
	
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				state:'',
				token:'',
				nameList:['仅退款','退款退货'],
				nameLists:['仅退款','换货','退款退货','维修'],
				name:'',
				goodslist:[],
//				cargotype:[{name:'未收到货'},{name:'已收到货'}],
//				cargoshow:false,
//				cargotypeName:'',
				refundtype:[],
				refundshow:false,
				refundshows:false,
				refundName:'',
				img:[],
				orderNo:'',
				skuId:'',
				applyforshow:false,
				applyforName:'',
				sumAmount:'',
			}
		},
		created(){
			this.state = this.$route.query.state;
			this.token = localStorage.getItem('token');
			this.orderNo = this.$route.query.orderNo;
			this.skuId = this.$route.query.skuId;
			var url = BaseUrl + 'orders/applyindex?appId=wap&' + '&token=' +this.token + '&orderNo=' + this.orderNo + '&skuId=' + this.skuId;
			this.$http.get(url).then(res=>{
				console.log(res.data)
				if(res.data.code == '10000'){
					this.goodslist = res.data.data;
					this.sumAmount = res.data.data.sumAmount;
//					console.log(this.goodslist.goodsDetailVo)
				}
			}).catch(error=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
		},
		methods:{
			//
			nameon:function(name){
				this.refundtype = [];
				this.name = name;
				this.applyforName='';  // 换货 维修
				this.refundName=''  //  退货原因
				var type = '';
				if(name == '仅退款'){
					type = 4;
					this.serve(type);
				}else if(name == '换货'){
					type = 1;
					this.serve(type);
				}else if(name == '退款退货'){
					type = 2;
					this.serve(type);
				}else{
					type = 3;
					this.serve(type);
				}
				
			},
			
			serve(type){
				var url = BaseUrl + 'project/descript/afterSaleReason?type=' + type;
				this.$http.get(url).then(res=>{
//					console.log(res.data)
					if(res.data.code == '10000'){
						this.refundtype = res.data.data;
					}
				})
			},
//			//点货物状态
//			cargotypeon:function(){
//				this.cargoshow = true;
//			},
//			//点击关闭
//			shuton:function(){
//				this.cargoshow = false;
//			},
//			//点击点货物状态内容
//			cargotypename:function(name){
//				this.cargoshow = false;
//				this.cargotypeName = name;
//			},
			//点击退货原因
			refundtypeon:function(){
				this.refundshow = true;
			},
			//退货关闭
			refundshuton:function(){
				this.refundshow = false;
			},
			//退货内容
			refundname:function(name){
				this.refundshow = false;
				this.refundName = name;
			},
			//换货
			applyforon:function(){
				this.applyforshow = true;
			},
			//关闭换货
			applyforshuton:function(){
				this.applyforshow = false;
			},
			//换货内容
			applyforname:function(name){
				this.applyforshow = false;
				this.applyforName = name;
			},
			//提交
			submiton:function(){
				var img = String(this.img);
				var content = this.$refs.content.value;
				var type='';
				var amount= '';
				var reason='';
				if(this.name == '仅退款'){
					type = 4 
					amount = this.sumAmount;
					reason = this.refundName;
				}else if(this.name == '退款退货'){
					type = 2
					amount = this.sumAmount;
					reason = this.refundName;
				}else if(this.name == '换货'){
					type = 1
					reason = this.applyforName;
				}else{
					type = 3
					reason = this.applyforName;
				}
				var url = BaseUrl + 'orders/addafterSaleapply?appId=wap' + "&token=" + this.token + "&orderNo=" + this.orderNo + '&skuId=' + this.skuId + '&reason=' + reason + '&img=' + img + '&content=' + content + '&type=' + type + '&amount=' + amount;
				if(type !='' && content!='' && reason !=''){
					this.$http.get(url).then(res=>{
						console.log(res)
						if(res.data.code == '10000'){
							Toast({
								message: '申请成功',
								position: 'middle',
								duration: 3000
							});
							this.$router.push({
								path:'/myindent'
							})
						}
					})
				}else{
					Toast({
						message: '请完善信息',
						position: 'middle',
						duration: 3000
					});
				}
				
			},
			changeUrl(e) {
				var _this= this
				var file = e.target.files[0];
				 var reader = new FileReader();
                  		reader.readAsDataURL(file);
                  		console.log(reader)
                  		 reader.onloadend = function () {
                  		 	var dataURL = reader.result;
                  		 	_this.img.push(dataURL);
                  		 }
           	 	
        	}
		}
	}
</script>

<style scoped="scoped">
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.24rem;
		color: #323232;
		font-size: 0.36rem;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	.title{
		font-size: 0.3rem;
		color: #989898;
		text-align: center;
		border-top: 0.16rem solid #f2f2f2;
		padding: 0.2rem 0;
	}
	.goods{
		padding: 0.2rem 0.25rem ;
		background: #f5f5f5;
		display: flex;
		justify-content: space-between;
	}
	.goodsimg{
		width: 1.4rem;
		height: 1.4rem;
	}
	.goodsimg img{
		width: 100%;
		height: 100%;
	}
	.goods_u{
		display: flex;
		justify-content: space-between;
	}
	.goodsName{
		width: 3.4rem;
	}
	.goodsName div:first-child{
		font-size: 0.26rem;
		color: 323232;
		overflow: hidden;
	  	text-overflow:ellipsis;
	  	display: -webkit-box;
	  	-webkit-line-clamp: 2;
	  	-webkit-box-orient: vertical;
	  	width:3.4rem;
	}
	.goodsName div:last-child{
		font-size: 0.21rem;
		color: #b6b6b6;
		margin-top: 0.3rem;
	}
	.price{
		text-align: right;
	}
	.price div:nth-child(1){
		font-size: 0.17rem;
		color: #323232;
	}
	.price div:nth-child(2){
		font-size: 0.17rem;
		color: #989898;
		text-decoration: line-through;
	}
	.price div:nth-child(3){
		font-size: 0.17rem;
		color: #989898;
	}
	.total{
		padding: 0.2rem 0.25rem ;
		background: #f5f5f5;
		text-align: right;
		font-size: 0.21rem;
		color: #323232;
	}
	.serve{
		padding: 0.2rem 0.25rem;
	}
	.servertype{
		padding: 0.2rem 0.25rem;
	}
	.servertype button{
		margin:0  0.1rem;
	}
	.btn{
		padding: 0.05rem  0.1rem;
		border: 1px solid #323232;
		color: #323232;
		border-radius: 0.1rem;
		background: #fff;
		outline: none;
	}
	.btnon{
		padding: 0.05rem  0.1rem;
		border: 1px solid #ff2040;
		color: #ff2040;
		border-radius: 0.1rem;
		background: #fff;
		outline: none;
	}
	.servecause{
		padding: 0 0.25rem;
	}
	.servecause_d{
		padding: 0.2rem 0;
		border-bottom: 1px solid #cccccc;
		display: flex;
		justify-content: space-between;
		align-content: center;
	}
	.servecause_d div:first-child{
		font-size: 0.3rem;
		color: #323232;
	}
	.servecause_d div:last-child{
		font-size: 0.26rem;
		color: #989898;
	}
	.servecause_d div:last-child img{
		width: 0.3rem;
		height: 0.3rem;
		margin-top: 0.1rem;
		margin-left: 0.2rem;
	}
	.type{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 999;
	}
	.cargotype{
		width: 100%;
		position: absolute;
		background: #fff;
		left: 0;
		bottom: 0;
	}
	.cargotype div:nth-child(1){
		text-align: center;
		font-size: 0.3rem;
		color: #323232;
		padding: 0.2rem 0;
	}
	.cargotype_dd{
		padding: 0.2rem 0.25rem;
		font-size: 0.26rem;
		color: #323232;
		border-top: 1px solid #cccccc;
	}
	.shut{
		background: #ff2040;
		padding: 0.2rem 0;
		text-align: center;
		color: #fff;
		font-size: 0.34rem;
		margin-top: 0.3rem;
	}
	.refundsum{
		padding: 0.2rem  0;
	}
	.refundsum div:first-child{
		font-size: 0.3rem;
		color: #323232;
	}
	.refundsum div:first-child span{
		color: #ff2040;
		font-size: 0.37rem;
	}
	.refundsum div:last-child{
		font-size: 0.3rem;
		color: #989898;
	}
	.explain_d{
		padding: 0 0.25rem;
	}
	.explain{
		width: 100%;
		box-sizing: border-box;
		border: 1px solid #989898;
		padding: 0.25rem;
		outline: none;
	}
	.submit{
		margin: 0.2rem 0.25rem 0 0.25rem;
		padding:0.2rem 0;
		background: #ff2040;
		color: #FFFFFF;
		font-size: 0.26rem;
		text-align: center;
		border-radius: 0.4rem;
	}
	.addimg{
		display: flex;
	}
	.addimg_d{
		width: 33%;
		height: 2rem;
	}
	.addimg_d img{
		width: 100%;
		height: 100%;
	}
	.add{
		width: 33%;
		height: 2rem;
		background-image: url(../assets/add.png);
		background-size: 100% 100%;
		margin-left: 0.25rem;
	}
	.file{
		width: 1.5rem;
		height: 4.5em;
		opacity: 0;
	}
</style>
